
<template>
    <div id="forgetPassword">
        <router-view></router-view>
        <div class="pageDiv">
            <div class="headerDiv">
                <div class="title">设置新登录密码</div>
            </div>
            <div class="subTitle">请避免用手机号码，姓名拼音</div>
            <div class="accountDiv">
                <input
                        v-model="pwd1"
                        placeholder="（8-20位字母/数字）"
                        class="account"
                        @blur="fixScroll"

                />

                <div class="line"></div>
            </div>

            <van-button
                    type="default"
                    class="loginbutton"
                    size="large"
                    color="#397BE6"
                    @click="buttonClick"
            >确定</van-button
            >

        </div>
    </div>
</template>

<script>
    import {ispwd,md5Str} from "../../utils/utils";
    import {api_resetpassword} from "../../service/api/user";

    export default {
        name: "ForgetPassword",
        data() {
            return {
                pwd1: "",
                phone:this.$route.params.phone,
                code:this.$route.params.code,
            };
        },
        computed: {

        },
        methods: {
            fixScroll() {

                let u = navigator.userAgent;

                let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

                if (isiOS) {

                    window.scrollTo(0, 0);

                }

            },
            async buttonClick() {
if (!ispwd(this.pwd1)){
    this.$toast("请输入8-20位(字母/数字)的密码");
    return;
}

let date = {
    code:this.code,
    mobile:this.phone,
    password:md5Str(this.pwd1)
}
                this.$toast.loading({
                    mask: true,
                    message: '',
                    duration:0
                });


                api_resetpassword(date).then(()=>{
                    this.$toast('密码重制成功');
                    // this.$router.push({name:"home"});

                    this.$router.go(-2);
                }).catch((error)=>{
                    this.$toast(error.message);
                })
                // this.$router.go(-3);
            },
        },
        mounted(){
            // this.type = this.$route.params.type;

        }
    };
</script>

<style scoped>
    #forgetPassword {
        position: relative;
        top: 0;
        left: 0;
        /*right: 0;*/
        /*bottom: 0;*/
        width: 100%;
        height: 100%;
        z-index: 200;
        overflow: auto;
        background-color: white;
    }
    .pageDiv {
        margin-left: 1.3333333333333333rem;
        margin-right: 1.3333333333333333rem;

        margin-top: 2.566666666666667rem;
    }

    .headerDiv {
        display: flex;
        position: relative;
        align-items: center;
        height: 2.8rem;
        width: 100%;
    }

    .title {
        height: 2.8rem;
        font-size: 2.1333333333333333rem;
        font-family: PingFangSC;
        font-weight: 600;
        color: #121c32;
        line-height: 2.7666666666666666rem;
    }
    .subTitle {
        margin-top:0.7666666666666667rem;
    ;
        height:1.0666666666666667rem;
        font-size:1.0666666666666667rem;
        font-family:PingFangSC;
        font-weight:400;
        color:rgba(122,132,145,1);
        line-height:1.0666666666666667rem;
    }

    .accountDiv {
        position: relative;
        margin-top: 2.2666666666666666rem;
        display: flex;
        height: 3.4rem;
        align-items: center;
    }

    .account {
        height: 3.4rem;
        width: 20rem;
        line-height: 1.5rem;
    }

    .delete {
        position: absolute;
        right: 0;
        height: 1rem;
        width: 1rem;
    }

    .vcodeDiv {
        position: relative;
        margin-top: 0rem;
        display: flex;
        height: 4.4rem;
        align-items: center;
    }
    .pwd {
        height: 4.4rem;
        width: 15rem;
    }

    .forgetpwd {
        position: absolute;
        right: 0;
        height: 4.4rem;
        font-size: 1.0666666666666667rem;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(57, 123, 230, 1);
        line-height: 4.4rem;
    }

    .forgetpwdDisable {
        position: absolute;
        right: 0;
        height: 4.4rem;
        font-size: 1.0666666666666667rem;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(191, 195, 205, 1);
        line-height: 4.4rem;
    }

    .loginbutton {
        margin-top: 2rem;
        border-radius: 1.6333333333333333rem;
    }
    .footDiv {
        display: flex;
        flex-direction: column;
        height: 6.9rem;
        align-items: center;
        margin-top: 3.2333333333333334rem;
    }

    .footTopLabel {
        height: 1.2rem;
        font-size: 0.8666666666666667rem;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(122, 132, 145, 1);
        line-height: 1.2rem;
    }
    .footBttomLabel {
        margin-top: 0.36666666666666664rem;
        height: 1.2rem;
        font-size: 0.8666666666666667rem;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(18, 28, 50, 1);
        line-height: 1.2rem;
    }

    .loginImg {
        margin-top: 1.2666666666666666rem;
        height: 2.933333333333333rem;
        width: 2.933333333333333rem;
    }

    .line {
        position: absolute;
        left: 0rem;
        right: 0rem;
        height: 0.5px;
        bottom: 0rem;
        background-color: #f0f1f5;
    }

    input::-webkit-input-placeholder {
        font-size: 1.0666666666666667rem;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(191, 195, 205, 1);
    }
</style>
